.directory {
	display: flex;
	flex-direction: column;

	height: 100vh;

	padding: 1.25rem 2rem;

	& &__search-form {
		display: grid;
		grid-gap: 0 10px;

		grid-template-columns: 2fr auto;
	}

	& &__channel-name,
	& &__user-name,
	& &__user-count,
	& &__username,
	& &__email,
	& &__domain {
		overflow: hidden;

		white-space: nowrap;
		text-overflow: ellipsis;
	}

	& &__user-count {
		width: 80px;
	}

	& &__user-name,
	& &__username,
	& &__email,
	& &__domain {
		min-width: 100px;
	}

	.rc-table-content {
		display: flex;
		overflow-x: auto;
		flex-direction: column;
		flex: 1 1 100%;

		height: 100vh;

		& .js-sort {
			cursor: pointer;

			&.is-sorting .table-fake-th .rc-icon {
				opacity: 1;
			}
		}

		& .table-fake-th {
			&:hover .rc-icon {
				opacity: 1;
			}

			& .rc-icon {
				transition: opacity 0.3s;

				opacity: 0;

				font-size: 1rem;
			}
		}
	}

	@media (width <= 980px) {
		.rc-table-content {
			& th:not(:first-child),
			& td:not(:first-child) {
				display: none;
			}
		}
	}
}
